require(['config'], () => {
    require(['jquery', 'template', 'jquery.cookie', 'loadHF'], ($, template) => {
      // 配置自动转换 cookie 的 JSON 格式数据
    //   $.cookie.json = true
      // 1、读取保存在 cookie 中的购物车数组
      const cart =JSON.parse( $.cookie('cart')) || []

    // 2、通过模板引擎渲染表格数据
    const html = template('cart-template',{cart:cart})

    // 3.获取元素进行渲染
    $('.cart-body').html(html)


    // 4.计算金额
    
    const total =()=>{
        // 4-2调用数组的reduce方法进行加减乘除
        // 4-3第一个参数是计算结果，第二个参数是数组的每个成员
        // 4-4这里的prod是一个对象！！！
        const money = cart.reduce((result,prod)=>{
            result += prod.num * prod.price
            // 4-5这里的result被return到下一次遍历数组是执行的回调函数中
            // 4-6直到把数组最后一个遍历完成
            // 4-7最后一个result return作为reduce函数的返回值，使用一个变量接收他
            return result
        },0)
        // 4-8最后将接收的变量插入网页(保留两位小数)
        $('.total').html(money.toFixed(2))
    }
    // total()  //4-1页面打卡自动计算金额

    // 5.删除购物车商品
    // 5-1给删除按钮添加点击事件(通过事件委托的方式)
    $('.cart-body').on('click','.del',(e)=>{
        console.log('删除');
        // 5-2获取当前行
        const $tr = $(e.target).parents('tr')
        // 5-3从当前页面删除该行
        $tr.remove()
        // 5-4从cookie中删除数据
            // 获取商品id
            const id = $tr.data('id')
            // 根据id找到下标，删除数组中的元素
            const index = cart.findIndex(prod => prod.id === id)
            cart.splice(index,1)
            // 将删除后的数据重新保存到cookie中
            $.cookie('cart',JSON.stringify(cart),{expire:60,path:'/'})
        // 5-5删除后重新计算总价
        // total()

    })

    // 6.加减数量
    // 6-1给按钮绑定点击事件(通过事件委托绑定)
    $('.cart-body').on('click','.minus,.plus',e=>{
        // 6-2获取当前行
        const $tr = $(e.target).parents('tr')
        // 6-3获取id
        const id = $tr.data('id')
        // 6-4通过id查找数组中的每个对象信息
        const prod = cart.find(prod=>prod.id === id)
        // 6-5判断点击的是加还是减
        if($(e.target).is('.plus')){
            prod.num +=1
        }else{
            if(prod.num <=1) return
            prod.num -=1
        }
        // 6-6设置完成后重新设置cookie里的值
        $.cookie('cart',JSON.stringify(cart),{expire:70,path:'/'})
        // 6-7重新显示数量
        $tr.find('.amount').html(prod.num)
        // 6-8重新计算小计
        $tr.find('.sub').html((prod.num * prod.price).toFixed(2))
        // 6-9重新计算总价
        // total()
       
    })

    // 7.全选--原生获取
    let all = document.querySelector('.allBtn')
    let otherList = document.querySelectorAll('tbody>tr input')
    let allMoney = document.querySelector('.all')
    console.log(allMoney);
    all.onclick = function() {
        let state = all.checked
        otherList.forEach(function(item) {
            item.checked = state
        })
    }
    otherList.forEach(function(item) {
        item.onclick = function() {
            let flage = true
            for (let i = 0; i < otherList.length; i++) {
                if (otherList[i].checked == false) flage = false
            }
            all.checked = flage
        }
    })

    allMoney.addEventListener('click',function(){
        console.log(1);
        let money =0
        for(var i =0;i<otherList.length;i++){
           console.log( otherList[i].checked);
            if(otherList[i].checked ){
                money += $(otherList[i]).parents('tr').find('.sub').html() -0
            }
        }
        $('.total').html(money.toFixed(2))
    })
  })
})